<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--部门数据-->
      <el-col :span="4" :xs="24">
        sdfsafsafs
      </el-col>
      <!--用户数据-->
      <el-col :span="20" :xs="24">
        <div id="container"></div>
      </el-col>
    </el-row>

    
  </div>
</template>

<script setup name="Demo">

import { initMap } from '@/utils/map'
import { shallowRef } from '@vue/reactivity'
import { onMounted } from "vue";
const map = shallowRef(null);
async function newMap() {
  let AMap = await initMap();
  let map = new AMap.Map("container", {
    viewMode: "3D",
    zoom: 5,
    zooms: [2, 22],
  });
  let positionArr = [
    [113.357224, 34.977186],
    [114.555528, 37.727903],
    [112.106257, 36.962733],
    [109.830097, 31.859027],
    [116.449181, 39.98614],
  ];
  for (let item of positionArr) {
    let marker = new AMap.Marker({
      position: [item[0], item[1]],
    });
    map.add(marker);
  }
}


onMounted(() => {
  newMap();
})
</script>
<style  scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 800px;
}
</style>
